<template>
  <div style="width:100%;background: #fff;padding-bottom:00px">
    <div class="big_div">
      <x-header header-background-color="#fff" :left-options="{showBack: true,preventGoBack:true}"  @on-click-back="GoBack">登记出动情况
        <!-- <a slot="right">Feedback</a> -->
      </x-header>
      <div class="big_content">
            <ul class="information">
                    <li>
                                <i>带队领导</i>   
                                <span>
                                    <input type="text" v-model="obj.name" placeholder="请输入带队人员姓名">
                                </span> 
                    </li>
                    <li>
                                <i>职务</i>   
                                <div class="spanK">
                                 <span  @click="selectEquip" class="wSpan">
 										<input type="text" readonly placeholder="请选择职务"  ref="inputxw">
                                    <img src="../../assets/images/as_03.png" alt="" width="20" height="20">
                               </span> 
                                </div>
                    </li>
                    <li>
                                <i>联系电话</i>   
                                <span>
                                    <input type="text" minlength="11" v-model="obj.tel" placeholder="请输入联系电话">
                                </span> 
                    </li>
                    <li>
                                <i>小队数量</i>   
                                <span>
                                    <input type="number" v-model="obj.sl" placeholder="请输入小队数量">
                                </span> 
                    </li>
                    <li>
                                <i>出动人数</i>   
                                <span>
                                    <input type="number" v-model="obj.rs" placeholder="请输入出动人数">
                                    <em>人</em>
                                </span> 
                    </li>
                    <li>
                        <i>携带装备</i>   
                        <div>
                              <div class="spanD"  v-for="(item,index) in resurceArr"  :key="index">                     
                                <div class="spanK">
                                 <!--   <select v-model="item.equipid">
                                        <option v-for="(item,index) in ment" :checked="item.checked" :key="index" :value="item.value">{{item.label}}</option>
                                    </select>-->
                                    <span  @click="selectEquipXD(index)" class="wSpan">
                                      <input type="text" readonly placeholder="请携带装备" :value="item.equipname">
                                      <img src="../../assets/images/as_03.png" alt="" width="20" height="20">
                                    </span>
                                  </div>
                                  <div class="spanY">
                                    <input type="number" placeholder="0" max="99" v-model="item.equipnum">
                                    <em @click="addNum(1,index)">+</em>
                                    <em @click="addNum(0,index)"  :style="{ 'visibility': index === 0 ? 'hidden' : 'inherit'}">-</em>
                                  </div>
                              </div>
                              <!-- <div class="spanD">
                                <div  class="spanK">
                                    <select v-model="obj.xdzbb">
<option v-for="(item,index) in options" :checked="item.checked" :key="index" :value="item.value">{{item.label}}</option>
                                    </select>
                                    <img src="../../assets/images/as_03.png" alt="" width="20" height="20">
                                    </div>
                                    <div class="spanY">
                                    <input type="number" placeholder="0" max="3" v-model="obj.xdzbbb">
                                    <em @click="addNum(1)">+</em>
                                    </div>
                              </div> -->
                          </div>
                    </li>
                    <li>
                        <i>出行方式</i>   
                        <div class="spanK">
                         <span  @click="selectEquipcxfs" class="wSpan">
                          <input type="text" readonly placeholder="请选择出现方式"  ref="inputcxfs">
                            <img src="../../assets/images/as_03.png" alt="" width="20" height="20">
                             </span>
                        </div> 
                    </li>
                    <li>
                        <i>队伍地址</i>   
                        <div class="tc">
                          <div class="watch">
                                <i style="width:66%;color:#000;line-height: normal;text-align: left;">{{feedbackadd}}</i>
                                     <!-- <group>                       
                                       <x-switch title="开启定位" v-model="obj.value" @on-change="swC"></x-switch>
                                     </group> -->
                                <div class="dw" style="height: 32px;"><img class="inh" src="../../assets/images/icon/locationWhite.png" alt="" width="15" srcset="" @click="refreshLocation">重新定位</div>
                          </div>
                        </div> 
                    </li>
                                        <li>
                       <i>补充说明</i>   
                                <span>
                                    <textarea resize="none" style="background:none;width:85%" v-model="obj.no" placeholder="请输入说明"></textarea>
                                    <div class="pit" @click="yySet"><img class="inh" src="../../assets/images/yx.png" alt="" style="margin-right:0" width="15"></div>
                                </span> 
                    </li>
                    <li>
                        <i>填写时间</i>   
                            <div class="spanK spanL">
                                <!-- <x-button type="primary"  plain @click.native="showPlugin" style="border: 1px solid #afafaf;color:#afafaf">{{time}}</x-button> -->
                                <datetime format="YYYY-MM-DD HH:mm"  v-model="obj.time" @on-change="change">{{obj.time}}</datetime>
                                <img src="../../assets/images/3_11.png" alt="" width="20" height="20" style="top:8px;left:5px">
                            </div>
                    </li>
            </ul>
      </div>
    </div>
        <popup-picker :showCell="false"  :show.sync="showPopupPicker" ref="equip" :data="pation" @on-change="onChange" :columns="3" ></popup-picker>
    <popup-picker :showCell="false"  :show.sync="popcxfs" ref="cxfs" :data="options" @on-change="onChangecxfs" :columns="3" ></popup-picker>
    <popup-picker :showCell="false"  :show.sync="showPopupPickerxd" ref="equipxd" :data="ment" @on-change="onChangexd" :columns="3" v-model="equipModel" ></popup-picker>    
        
                                <div class="dvTc">
                                    <div class="three" @click="submitSave">进入救援模式</div>
                                    <div class="txt" @click="subPage">跳过</div>
                                </div>
  </div>


</template>
 
<script>
import { Datetime, PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch,XHeader,PopupRadio} from 'vux'
import { saveData,getDataZW } from '@/assets/js/service'
export default {
  props:["refid"],
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton,
    Divider,
    Cell,
    XSwitch,
    Datetime,
    XHeader,
    PopupRadio     
  },
  created(){
    let _this=this;
        let v ={
          "userid":_this.$store.state.user.userid
          // "8a8a8a6f7074d3d6017074eb204c0004"
        };
        getDataZW(v,function(res){
          _this.pation = res.data
          _this.pation.forEach((item) =>{
            item.name = item.posttypename
            item.value = item.posttypecode
            item.ordernum = item.ordernum
          })
          console.log(res,999)
        })
    this.$enJsBack()//调用安卓方法（手机back键返回问题）
  },
  methods: {
      yySet(){
          if(this.$isAndroid()){
          window.android.openVoice();
          }else{
          console.log("打开语音识别功能")
          }
      },
      setContent(_text){
          let _this=this;
          if(_text){
            _this.obj.no+=_text;
          }
      },
      refreshLocation(){
       if(this.$isAndroid()){
          console.log("invoking android!")
          window.android.getCurrentLocation();
        }else{
          this.locationSet("93.793409_31.896125_四川省雅安市拉亚镇桑木卡")
        }
    },
      onChange(v){
      this.$refs.inputxw.value =this.$refs.equip.getNameValues()
      this.obj.zw = v[0]
    },
    onChangexd(){
      console.log(this.equipModel)
      let _this=this;
      if(this.equipModel.length>0){
         _this.resurceArr[_this.currselect].equipname=_this.$refs.equipxd.getNameValues();
         _this.resurceArr[_this.currselect].equipid=_this.equipModel[0];
      }
    },
    onChangecxfs(v){
      this.$refs.inputcxfs.value =this.$refs.cxfs.getNameValues()
      this.obj.cxfs = v[0]
    },
    selectEquip(){
      //this.currselect=_index;
      this.showPopupPicker=true;
      this.popcxfs=false;
      this.showPopupPickerxd=false;
    },
    selectEquipcxfs(){
      this.popcxfs=true;

      this.showPopupPickerxd=false;
      this.showPopupPicker=false;
    },
    selectEquipXD(_index){
      console.log(_index)
      this.currselect=_index;
      this.showPopupPickerxd=true;
      this.showPopupPicker=false;
      this.popcxfs=false;
    },
    openRouter(_type){
      console.log(_type)
      //this.$showBottomToast(_type);
    },
    log (str1, str2 = '') {
      console.log(str1, str2)
    },
    GoBack(){
      this.$closeStates();
      this.$emit("close")
    },
    onConfirm (val) {   
      console.log('current value', this.value1)
    },
    change(val){
      this.obj.time = val
      console.log(val)
    },
    showPlugin () {
      let that = this
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM-DDHH:mm',
        value: '2019-05-20:00:00',
        onConfirm (val) {
          that.obj.time = val
          console.log('plugin confirm', val)
        },
        onShow () {
          console.log('plugin show')
        },
        onHide (val) {
           that.time = val
          console.log('plugin hide')
        },
      })
    },
        addNum(htype,_index){
            let _this=this;
            if(htype==0){
              if(_this.resurceArr.length == 1){
                      return
                }
              _this.resurceArr.splice(_index,1);
            }else{
              let obj={"equipid":"","equipnum":"","equipname":""};
              _this.resurceArr.push(obj);
            }
            console.log(_this.resurceArr)
        },
        subPage(){
            this.$router.push({path:"/participateRescue"});
        },
        submitSave(){
          let _this = this
                   if(
           this.$verification(this.obj.name,0,"名字") === undefined||
           this.$verification(this.obj.zw,9,"职务") === undefined||
           this.$verification(this.obj.tel,0,"电话") === undefined||
           this.$verification(this.obj.tel,1,"电话") === undefined||
           this.$verification(this.obj.sl,0,"数量") === undefined||
           this.$verification(this.obj.rs,0,"人数") === undefined||
           this.$verification(this.obj.cxfs,9,"出行方式") === undefined){
             return
         }
          _this.$vux.loading.show({
            text: 'Loading'
          })
          //+
          //&&item.equipname

                let equip=[];
      _this.information="";
      if(_this.resurceArr.length>0){
        _this.resurceArr.forEach((item,index)=>{
          if(item.equipid&&item.equipnum&&item.equipname){
            equip.push(item);
            _this.information+=","+item.equipid+"需要"+item.equipnum+"个";
          }
        })
      }
      if(_this.information){
        _this.information=_this.information.substring(1);
      }
        if(equip.length == 0){
              equip = ''
        }else{
          equip = JSON.stringify(equip)
        }
          let param={
            "userid":_this.$store.state.user.userid,
            "orgcode":_this.$store.state.user.orgcode,
            "eventid":!_this.refid ? _this.$route.query.refid : _this.refid,
            "teamname":"",
            "leadername":_this.obj.name,
            "protitle":_this.obj.zw,
            "conacttel":_this.obj.tel,
            "dispatchnum":_this.obj.rs,
            "longitude":_this.feedbacklon,
            "latitude":_this.feedbacklat,
            "address":_this.feedbackadd,
            "filltime":_this.obj.time,
            "districtcode":"",
            "backstate":"",
            "carnum":"",
            "travelway":_this.obj.cxfs,
            "notes":_this.obj.no,
            "equiplistStr":equip,
            };
          let paramObj={"obj":JSON.stringify(param)};      
          saveData(paramObj,function(res){
              if(res.status=='200'){
                  _this.$vux.loading.hide()
                  _this.$showBottomToast("保存成功")
                  setTimeout(() =>{
                  _this.$router.push({path:"/participateRescue"});
                  },1000)

                 // _this.$emit("close");
              }else{
                _this.$showBottomToast(res.message);
              }
                console.log(res)
          })
        },
        swC(val){
          console.log(val)
        },
      locationSet(lontatStr){  //地址
          let _this=this;
          _this.feedbacklon=lontatStr.split("_")[0];
          _this.feedbacklat=lontatStr.split("_")[1];
          _this.feedbackadd=lontatStr.split("_")[2];   
    },
  },
  mounted(){
    window.GoBack=this.GoBack;
    window.locationSet=this.locationSet;
    let _this=this;
    _this.refreshLocation();
    // if(_this.$isAndroid()){//地址
    //   console.log("invoking android!")
    //   window.android.getCurrentLocation();
    // }else{
    //   this.locationSet("93.793409_31.896125_四川省雅安市拉亚镇桑木卡")//地址
    // }
    
  //  let lonlat=_this.itemObj.longitude+"_"+_this.itemObj.latitude+"_"+_this.itemObj.eventaddress;
  //  _this.locationSet(lonlat);
  },
  data () {
    return {
      queryMap:{},
      date: '',
      eventlist:[],
      refreshing: false,
      loading: false,
      text: 'List',
            txtId:"",
      showPopupPicker:false,
      equipModel:[],
      popcxfs:false,
      currselect:0,
      showPopupPickerxd:false,
      options: [{
          value: '1',
          name: '摩托化推进',
          checked:"checked"
      }, {
          value: '2',
          name: '火车',
          checked:false
      }, {
          value: '3',
          name: '飞机',
          checked:false
      }],
      pation: [],
            ment: [{
          value: '1',
          name: '药箱',
          checked:"checked"
      }, {
          value: '2',
          name: '电话',
          checked:false
      }, {
          value: '3',
          name: '手机',
          checked:false
      }],
      obj:{
      value:"",
      time:getNowFormatDate(),
      value1:"",
      cxfs:"请选择",
      name:"",
      zw:"请选择职务",
      tel:"",
      sl:"",
      rs:"",
      items: [],
      no:""
      },
      feedbacklon:"",
      feedbacklat:"",
      feedbackadd:"",
      num:1,
      resurceArr:[{"equipid":"","equipnum":"","equipname":""}],
      information:""
    }
  }
}


 function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
</script>
 
<style lang="less" scoped>
.big_div{
        ul.information{
                font-size: 0.26rem;
                li{
                    margin-top: 10px;
                    width: 96%;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    margin: 0 auto;
                    display: flex;
                    border-bottom: 1px solid #f1f1f1;
                    justify-content: space-between;
                        i{
                          font-style: normal;
                          line-height: 35px;
                          width: 25%;
                          display: inline-block;
                          }
                          div{
                            display: flex;
                            position: relative;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            width: 75%;
                            select{
                              border: 1px solid #afafaf;
                              border-radius: 5px;
                              width: 100%;
                              height: 35px;
                              color: #a5a5a5;
                              padding-left: 5px;
                              z-index: 999;
                              position: relative;
                              background: none;
                            }
                            img{
                              vertical-align: middle;
                              position: absolute;right: 5px;top: 7px
                            }
                            img.inh{position: initial;vertical-align: sub;height: 12px;width: 12px;margin-right: 3px}
                            div.spanD{
                              width: 100%;
                              display: inline-block;  
                              margin-bottom: 15px;
                              div.spanK{
                                  width: 51%;
                                  position: relative;
                                  button.weui-btn_plain-primary{border: 1px solid #afafaf}
                                  img{position: absolute;right: 5px;top: 7px}
                              };                    
                              div{
                                  width: 49%;
                                  display: inline-block
                              }
                            div.spanY{
                              width: 46%;
                              display: inline-block;
                              text-align: right;
                                  input{
                                    display: inline-block;
                                    width: 43%;
                                    border: 1px solid #afafaf;
                                    border-radius: 5px;
                                    height: 35px;
                                    text-align: center
                                  }
                                  em{
                                    font-style: normal;
                                    font-size: 24px;
                                    border-radius: 50%;
                                    border:1px solid #8b8b8b;
                                    width: 25px;
                                    height: 25px;
                                    display: inline-block;
                                    text-align: center;
                                    line-height: 19px;
                                    color: #8b8b8b
                                    }
                            }
                            }

                          };
                           div.spanL{
                                  border: 1px solid #afafaf;
                                  color:#afafaf;
                                  border-radius: 5px;
                                  a{
                                    display: block;
                                    text-align: left;
                                    text-indent: 30px;
                                    padding: 0;
                                    width: 100%;
                                    margin-left: 0!important;
                                    margin-right: 0!important;
                                    margin-top: 0!important;
                                    line-height: 35px;
                                    font-size: 16px;
                                  }
                              };  
                               span.wSpan{width: 100%;}  
                        span{
                            position: relative;
                            border: 1px solid #c3c3c3;
                            border-radius: 5px;
                            display: block;
                            width: 75%;
                        div.pit{
                              position: absolute;
                              right: 5px;
                              top: 12px;
                              z-index: 99;
                              background: rgb(64, 158, 255);
                              width: auto;
                              padding: 3px 5px;
                              border-radius: 3px;
                              img{
                                width: 12px;
                                height: 12px;
                              }
                            };
                            em{
                                position: absolute;
                                background: #f7f7f7;
                                color: #333333;
                                right: 0;
                                top: 0; 
                                font-style: normal;
                                height: 35px;
                                border-left: 1px solid #afafaf;
                                line-height: 35px;
                                width: 35px; 
                                text-align: center;
                                border-radius: 0 5px 5px 0;
                            }; 
                            input{
                              height: 35px;
                              background: none;
                              text-indent: 5px;
                              }
                        };
                        div.tc{
                            text-align: center;
                            width: 75%;
                            position: relative;
                            div.watch{
                              flex-wrap: nowrap;
                              align-items: center;
                            };
                            div{
                              padding: 0;
                              text-align: right;
                              margin-top: 0;
                              display: flex;
                              justify-content:flex-end;
                              width: 100%;
                              div.weui-cells.vux-no-group-title{
                                margin-top:0;
                              };
                              div.weui-cells{
                                overflow: visible;
                                margin-top: 0;
                              };
                            }
                        }
                        div.dw{border-radius: 3px;background: #409eff;color: #fff;font-size: 14px;display: inline-block;width: auto!important;padding: 5px 3px!important;}
                }
        }  
}
 .submit{color: #fff;background: #139be5;padding: 15px 0;position: relative;left: 0;bottom: 0;margin-top: 15px; width: 100%;text-align: center;font-size: 16px}     
    div.three{color: #fff; font-size: 16px; 
        background: #1d9ed7;
        padding: 15px 30px;
        display: inline-block;
        margin-top: 20px;
        letter-spacing: 1px;
        border-radius:5px 
    }
    div.txt{margin-top: 20px;color: #1d9ed7}
.dvTc{text-align: center;padding-bottom: 30px}
.vux-cell-box:not(:first-child):before{left: 0;}
</style>

<style>
div.vux-no-group-title{
margin-top: 0
};
.weui-cells.vux-no-group-title{
      position: absolute;
      right: -13px;
      top: -52px;
      background: no-repeat;
  }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #666;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #666;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #666;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #666;
}
</style>